const video=document.querySelector('video');
const controls=document.querySelector(".controls");

// 四个按钮
const play=document.querySelector('.play')
const stop=document.querySelector('.stop')
const rwd=document.querySelector('.rwd')
const fwd=document.querySelector('.fwd')

const timerDiv=document.querySelector(".timer")
const timer=document.querySelector(".timer > span")
const timerBar=document.querySelector(".timer > div")

// document.getElementsByClassName("controls")
video.removeAttribute('controls')
controls.style.visibility="visible";

// 处理播放和暂停
function handlePlayPause(){
   if(video.paused){
    //    attribute
    play.setAttribute("data-icon","u")
       video.play()
   }else{
       play.setAttribute("data-icon","P")
       video.pause()
   }
}
// 处理停止
function handleStop(){
   video.pause();
   video.currentTime=0;//propery
   play.setAttribute("data-icon","P")
}

// 往前进
const step=3
let timerFwd=0
function handleForword(){
    // 停止快退
    rwd.classList.remove("active")
    clearInterval(timerRwd)
 if(this.classList.contains("active")){
    //  停止快进，回复正常状态
     this.classList.remove('active')
     clearInterval(timerFwd)
     video.play()
 }else{
    //  执行快进
    this.classList.add('active')
    video.pause()
    timerFwd=setInterval(()=>{
    if(video.currentTime>=video.duration-step){
        this.classList.remove("active")
        // 最后一步，再走一步就到视频结尾
        clearInterval(timerFwd)
        handleStop()
    }else{
        video.currentTime+=step
    }
      
console.log( video.currentTime+=step);
    },200)
 }
}
// 往后退
let timerRwd=0
function handleRewind(){
    // 停止快进
    fwd.classList.remove("active")
    clearInterval(timerFwd)
 if(this.classList.contains("active")){
    //  停止快退，回复正常状态
     this.classList.remove('active')
     clearInterval(timerRwd)
     video.play()
 }else{
    //  执行快退
    this.classList.add('active')
    video.pause()
    timerRwd=setInterval(()=>{
    if(video.currentTime<=step){
        this.classList.remove("active")
        // 最后一步，再走一步就到视频开始
        clearInterval(timerRwd)
        handleStop()
    }else{
        video.currentTime -=step
    }
      
console.log( video.currentTime-=step);
    },200)
 }
}
// 时间
function getTimeText(second){
    const h=Math.floor(second/3600);//小时
    const m=Math.floor((second%3600)/60)//分
    const s=Math.floor(second%60)//秒
    return [h,m,s].map(n=>n<10?'0'+n:n).join(":")
}
function getTimeBarWidth(){
    const p=video.currentTime/video.duration;
const width=timerDiv.getBoundingClientRect().width*p
return width+"px"

}

function handleTimeUpdate(){
 timer.innerText=getTimeText(video.currentTime)
 timerBar.style.width=getTimeBarWidth()

}
function handleTimeBarClick({x}){
    const {x:divX,width: divWidth}=timerDiv.getBoundingClientRect()
    const w=x-divX//鼠标点击位置相对于timerDiv左边界的距离
    const p=w/divWidth//进展条宽度相当于整体宽度的百分比
    video.currentTime=video.duration*p
}
play.onclick=handlePlayPause
stop.onclick=handleStop
// video.playbackRate=5
fwd.onclick=handleForword
rwd.onclick=handleRewind
video.ontimeupdate=handleTimeUpdate

timerDiv.onclick=handleTimeBarClick
// setInterval间隔，可以重复执行
// setTimeout只能执行一次